<template>
  <div class="mark_wrap">
    <div class="markDow">
      <div class="title_wraps">
        <i class="el-icon-s-opportunity"></i>&nbsp;&nbsp;
        <Mtitle
          title="取蜜过程"
          width="100"
          :height="14"
          fontSize="24"
          titleColor="#ffffff"
          backgColor="#fa9108"
          :marginTop="25"
          :marginBottom="25"
        ></Mtitle>
      </div>
      <div class="arower_card">
        <div style="height: 600px">
          <el-steps direction="vertical" :active="5">
            <el-step
            class="colors"
              title="敲蜂箱"
              description="选定场所后，把蜂桶搬下来倒置、放平稳。轻轻打开蜂桶上半部分，然后将盖子搭在蜂箱另一头，接着用木棍或者其他物件轻轻敲打蜂箱，将需要取蜜的蜂巢中的蜜蜂驱赶开"
            ></el-step>
            <el-step
              title="扫蜂巢"
              description="部分蜜蜂刚睡醒，轻敲不起作用，就用小刷子帮它暂时离开"
            ></el-step>
            <el-step
              title="割蜜块"
              description="下手要轻、准，记得给蜜蜂留下充足的粮食。喷盐水。盐水能消毒、补水，还能防止蜜蜂被粘连"
            ></el-step>
            <el-step
              title="加蜂蛹合桶"
              description="蜂蛹不能浪费，还回去更有利，合上蜂桶，静置一段时间，待蜜蜂返回"
            ></el-step>
            <el-step
              title="压出蜜"
              description="最后我们只需要把蜜块带回压出蜜过滤就好，期间不需要加入其他物质，一定要保证深山土蜂蜜的纯正"
            ></el-step>
          </el-steps>
        </div>
        
        <p class="mores" @click="more()">了解更多</p>
      </div>
    </div>
  </div>
</template>

<script>
import Mtitle from "../global_title.vue";
export default {
  name: "HoneyMark",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    more(){
      this.$router.push('/evaluate')
    }
  },
  components: {
    Mtitle,
  },
};
</script>

<style lang="scss" >
.mark_wrap {
  width: 100%;
  height: auto;
  background: #27282d;
  padding: 50px 0;
  box-sizing: border-box;
  .markDow {
    width: 1170px;
    margin: 0 auto;
  }
}

.title_wraps {
    margin: 10px 0 50px 0;
  display: flex;
  align-items: center;

  > i {
    color: rgb(250, 145, 8);
    font-size: 24px;
  }
}
.el-step__description {
    color: #8a8a8a!important;
    font-size: 18px!important;
    line-height: 30px!important;
}
.el-step__title{
    color: #fa9108!important;
}
.mores {
  margin: 50px auto 20px auto;
  width: 280px;
  height: 80px;
  border: 2px solid #e9e9e9;
  opacity: 1;
  border-radius: 20px;
  line-height: 80px;
  font-size: 24px;
  font-family: PingFang SC;
  color: #999999;
  text-align: center;
  cursor: pointer;
  transition: all .1s;
}
.mores:hover{
  color: #3a9ed8!important;
  transform: translateY(-5px);
  box-shadow: 0 10px 10px rgba(0,0,0,0.07);

}
</style>